<template>
  <el-card shadow="always">
    <el-table border stripe :data="skuData.records">
      <el-table-column label="序号" type="index" align="center" width="90px">
      </el-table-column>
      <el-table-column label="名称" prop="skuName" show-overflow-tooltip width="120px"> </el-table-column>
      <el-table-column label="描述" prop="skuDesc" show-overflow-tooltip width="160px"> </el-table-column>
      <el-table-column label="默认图片" width="160px"> 
        <template #="{row,$index}">
          <img :src="row.skuDefaultImg" alt="" style="width:70px;height:90px">
        </template>
      </el-table-column>
      <el-table-column label="重量(千克)" prop="weight" width="90px"> </el-table-column>
      <el-table-column label="价格(元)" prop="price" width="90px"> </el-table-column>
      <el-table-column label="操作"> 
        <template #="{row,$index}">
          <el-button type="success" size="small" :icon="Top"></el-button>
          <el-button type="primary" size="small" :icon="Edit"></el-button>
          <el-button type="info" size="small" :icon="InfoFilled"></el-button>
          <el-button type="danger" size="small" :icon="Delete"></el-button>
          
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30]"
      layout="prev, pager, next, jumper,->,sizes,total "
      :total="30"
      background
      :pager-count="7"
    >
    </el-pagination>
  </el-card>
</template>

<script setup lang="ts">
import { ref,onMounted } from "vue";
import {reqSkuList} from '@/api/product/sku/sku'
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  //加号
  Plus,
  Top,
  Bottom,
  InfoFilled,
} from "@element-plus/icons-vue";

let currentPage = ref<number>(1)
let pageSize = ref<number>(10)

let skuData = ref<any>({})
// 组件挂载时发请求获取数据
onMounted(() => {
  getSkuList();
});

const getSkuList = async() => {
  let result = await reqSkuList(currentPage.value,pageSize.value)
  console.log(result)
  // 存储服务器返回的数据
  skuData.value = result
};
</script>

<style scoped>
</style>